<template>
    <div class="orders-block">
        <h2>订单列表</h2>
        <el-button type="primary" @click="handleSettle" style="margin-bottom: 15px">
            结算
        </el-button>
        <el-table :data="orders" style="width: 100%" v-loading="loading">
            <el-table-column prop="orderId" label="订单号" width="180" />
            <el-table-column prop="goods" label="商品名称" />
            <el-table-column prop="amount" label="数量" width="100" />
            <el-table-column prop="total" label="总价" width="120" />
        </el-table>
    </div>
</template>

<script setup>
import { settleOrder } from '@/api/order'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

defineProps({
    orders: {
        type: Array,
        default: () => []
    },
    showActions: {
        type: Boolean,
        default: false
    },
    total: {
        type: Number,
        default: 0
    },
    loading: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['reject', 'page-change'])

const currentPage = ref(1)
const pageSize = ref(10)

const handleSizeChange = val => {
    pageSize.value = val
    emit('page-change', {
        current: currentPage.value,
        pageSize: val
    })
}

const handleCurrentChange = val => {
    currentPage.value = val
    emit('page-change', {
        current: val,
        pageSize: pageSize.value
    })
}

const handleReject = orderId => {
    emit('reject', orderId)
    }

const handleSettle = () => {
    settleOrder()
    .then(res => {
        if (res.code === 0) {
            ElMessage.success('结算成功')
            emit('page-change', {
                current: currentPage.value,
                pageSize: pageSize.value
            })
        } else {
            ElMessage.error(res.message || '结算失败')
        }
    })
}

</script>

<style lang="less" scoped>
.orders-block {
    min-width: 350px;
    max-width: 100%;
    margin-bottom: 24px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    h2 {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 18px;
        color: #333;
    }

    .el-table {
        background: #fafbfc;
        border-radius: 6px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
        margin-bottom: 20px;
    }

    .pagination-wrapper {
        display: flex;
        justify-content: flex-end;
        padding: 10px 0;
        background: #fff;
        border-top: 1px solid #f0f0f0;
        margin-top: 20px;

        :deep(.el-pagination) {
            padding: 0;
            margin: 0;
            white-space: nowrap;
        }
    }
}
</style>
